<template>  
    <div ref="fullscreenElement" class="fullscreen">  
      <!-- 你的全屏内容 -->  
    </div>  
  </template>  
    
  <script>  
  export default {  
    name: 'FullScreenComponent',  
    mounted() {  
      this.toggleFullScreen();  
    },  
    beforeUnmount() {  
      this.exitFullScreen();  
    },  
    methods: {  
      toggleFullScreen() {  
        if (!document.fullscreenElement &&  
            this.$refs.fullscreenElement.requestFullscreen) {  
          this.$refs.fullscreenElement.requestFullscreen()  
            .catch(err => {  
              console.error('Error attempting to enable full-screen mode:', err);  
            });  
        } else if (document.exitFullscreen) {  
          document.exitFullscreen();  
        }  
      },  
      exitFullScreen() {  
        if (document.exitFullscreen) {  
          document.exitFullscreen();  
        }  
      }  
    }  
  };  
  </script>  
    
  <style scoped>  
  .fullscreen {  
    /* 你可以添加一些全屏时的样式 */  
    width: 100vw;  
    height: 100vh;  
    position: fixed;  
    top: 0;  
    left: 0;  
    z-index: 9999;  
    background-color: rgba(0, 0, 0, 0.5); /* 示例背景色 */  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    overflow: auto;  
  }  
  </style>